import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Line } from '@ant-design/charts';
import HeaderView from '../components/HeaderView.jsx';
import SmallMap from '../components/SmallMap';
import { Col, Row, Tabs } from 'antd';
import styles from '../assets/css/SmallMap.modules.css';
import EventList from '../components/EventList.jsx';
import FormDialog from '../components/FormDialog.jsx';
import { useEvent } from './hooks/useEvent.js';
import MapModel from '../components/MapModel';
import { getEventStatistic } from '../api/event.js';
import { useData } from '../common/formData.jsx';

const { TabPane } = Tabs;
const EventView = React.memo(() => {
  const {
    edata, //mysql 事件数据
    setEdata, //
    visible, //对话框的显隐
    showDialog,
    closeDialog, //关闭对话框
    id, //用于记录id
    setId,
    submit, //表单提交事件
    initialValues, //表单初始字段的值，用于点击toggle回显
    setInitialValues,
    defaultFileList, //upload 已上传图片
    setDefaultFileList,
    formData, //初始化表单数据
    getEData, //获取事件数据接收page,size 两个参数
    Toggle, //点击列表项按钮触发事件
    visibleMap, //地图对话框的显示隐藏
    showMap, //显示地图对话框
    closeMap, //关闭地图对话框
    modalMap, //地图对话框中的地图
    initMap, //初始化地图对话框
    submitMap,
  } = useEvent();
  const MemoMap = useMemo(
    () => <SmallMap />,
    [] //只有count变化才重新计算
  );
  useEffect(() => {
    asyncFetch();
    getEData(1, 40);
    getEventStatistic().then((res) => {
      // setDayData(res.data.result.day);
      // setMonthData(res.data.result.month);
      console.log(res);
      setD(res.data.result.day);
    });
  }, []);
  const [d, setD] = useState([]);
  const [dayData, setDayData] = useState([]);
  const [monthData, setMonthData] = useState([]);
  const asyncFetch = () => {};
  const config = {
    data: d,
    xField: 'day',
    xAxis: {
      inverse: true,
    },
    yField: 'count',
    seriesField: 'type',
    yAxis: {
      label: {
        formatter: (v) => {
          return `${v}`;
        },
      },
    },
    legend: {
      position: 'top',
    },
    smooth: true,
    // @TODO 后续会换一种动画方式
    animation: {
      appear: {
        animation: 'path-in',
        duration: 5000,
      },
    },
  };
  const onChange = (e) => {
    if (e == 2) {
      getEventStatistic().then((res) => {
        setD(res.data.result.month);
        // setData(JSON.parse(JSON.stringify(dayData)));
      });
    } else {
      getEventStatistic().then((res) => {
        setD(res.data.result.day);
        // setData(JSON.parse(JSON.stringify(dayData)));
      });
    }
  };
  return (
    <div>
      <HeaderView></HeaderView>
      <Row>
        <Col span={14}>
          <EventList
            edata={edata}
            title={'未确定事件'}
            flag={0}
            Toggle={Toggle}
          />
        </Col>
        <Col span={10}>
          <Tabs defaultActiveKey="1" onChange={onChange}>
            <TabPane tab="15天内事件发生统计" key="1"></TabPane>
            <TabPane tab="一年内事件发生统计" key="2"></TabPane>
          </Tabs>
          <Line {...config} style={{ height: '290px', marginTop: '0px' }} />
        </Col>
      </Row>
      <Row>
        <Col span={14}>
          <EventList
            edata={edata}
            title={'已确定事件'}
            flag={2}
            Toggle={Toggle}
          />
        </Col>
        <Col span={10}>
          <div className={styles.map}>{MemoMap}</div>
        </Col>
      </Row>
      <FormDialog
        visible={visible}
        cancel={closeDialog}
        submit={submit}
        formData={formData}
        initialValues={initialValues}
        defaultFileList={defaultFileList}
      />
      <MapModel
        map={modalMap}
        initMap={initMap}
        visible={visibleMap}
        handleCancel={closeMap}
        submit={submitMap}
      />
    </div>
  );
});

export default EventView;
